<template>
  <view class="container">
    <NavBar title="视频学习" />
    <video
      v-if="videoSrc"
      id="myVideo"
      :src="videoSrc"
      objectFit="cover"
      page-gesture
      show-mute-btn
      vslide-gesture
      vslide-gesture-in-fullscreen
      :title="'《' + videoInfo.title + '》' + '第' + isActiveIndex + '节'"
      controls
      @play="playVideo"
    ></video>
    <view class="video_info">
      <view class="title">
        {{ videoInfo.title }}
      </view>
      <view class="title">
        <view class="choose"> 选集 </view>
        <view class="choose_num">
          <view
            class="video_i"
            v-for="i in videoInfo.url.length"
            :key="i.index"
            :class="isActiveIndex == i ? 'active' : ''"
            @click="clickVideoItem(i)"
          >
            <text>{{ i }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="collect">
      <!-- {{Iscollection}} -->
      <view class="collect_left" @click="collectVideo">
        <i class="iconfont icon-shoucang" v-if="!Iscollection" />
        <i class="iconfont icon-xingxing1" v-else />
        <text style="font-size: 30rpx">
          <text v-show="Iscollection">取消</text>收藏
        </text>
      </view>

      <view class="collect_right" v-if="isDangyuan">
        <button
          type="primary"
          style="width: 340rpx; height: 80rpx !important; font-size: 30rpx"
          @click="downItem"
        >
          下载
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import {
  apiClickDown, // 7 点击下载时调用这个接口
  apiShouChang, // 8 收藏测试
  apiDelCollection, // 9 取消收藏
  apiCollectionList, // 10 收藏列表
  apiWatchRecords, // 12 观看进度记录
} from "@/net/educationalLearning.js";

import {
  downLoadFiles, // 下载文件
} from "@/utils/dowmloadFile.js";

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      isDangyuan: false,
      Iscollection: false,
      imgSrc:
        "http://58.213.110.131:8142/profile/2023/05/15/34cf2c2b-0d3d-4bb1-b646-92b93b97b15c.png",
      videoSrc: "", //地址
      isActiveIndex: 1,
      videoInfo: {},
    };
  },

  onLoad(options) {
    this.videoInfo = JSON.parse(options.item);
    // clickVideoItem(1)
    this.getCollectionList();
    setTimeout(() => {
      this.videoSrc = this.videoInfo.url[0].src;
      this.Iscollection = this.videoInfo.url[0].isCollect;
      console.log(
        this.videoInfo.url[0].isCollect,
        "this.videoInfo.url[0].isCollect"
      );
      this.clickCollectId = this.videoInfo.url[0].collectId;
      console.log(this.videoInfo.url[0].isCollect, "isCollect");
    }, 300);

    // 获取当前登录人身份信息
    let permission = JSON.parse(uni.getStorageSync("loginUserInfo")).permission;
    console.log(permission);
    if (permission.indexOf("common") > -1) {
      this.isDangyuan = false;
    }
    if (
      permission.indexOf("admin") > -1 ||
      permission.indexOf("superAdmin") > -1
    ) {
      this.isDangyuan = true;
    }
    console.log(this.isDangyuan);
  },

  methods: {
    // 播放进度发生变化时
    playVideo(e) {
      this.getWatchRecords();
    },

    // 调用观看进度
    getWatchRecords() {
      let data = {
        djStudyId: this.videoInfo.djStudyId,
        schedule: this.isActiveIndex,
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
      };
      console.log(data);
      apiWatchRecords(data)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 收藏列表
    getCollectionList() {
      console.log(this.videoInfo.url);
      let params = {
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
        learningType: 1,
      };
      apiCollectionList(params).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          console.log(res.data);
          console.log(Number(res.data[i].collectCount));
          for (let j = 0; j < this.videoInfo.url.length; j++) {
            if (this.videoInfo.djStudyId == res.data[i].djStudyId) {
              this.videoInfo.url[
                Number(res.data[i].collectCount) - 1
              ].isCollect = true;
              this.videoInfo.url[
                Number(res.data[i].collectCount) - 1
              ].collectId = res.data[i].collectId;
            }
          }
        }
      });
    },

    // 下载
    downItem() {
      let data = {
        status: 2,
        djStudyId: this.videoInfo.djStudyId,
        userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
        number: this.isActiveIndex,
      };
      console.log(this.isActiveIndex);
      apiClickDown(data)
        .then((res) => {})
        .catch((err) => {
          console.log(err);
          uni.showToast({
            title: "下载失败",
            mask: true,
            icon: "error",
            duration: 1000,
          });
        });
      if (this.videoInfo.url.length > 0) {
        let urlArr = [this.videoInfo.url[this.isActiveIndex - 1].src];
        console.log(this.videoInfo.fileUrl);
        let fileName = JSON.parse(this.videoInfo.fileUrl);
        // fileName.push({

        //   JSON.parse(this.videoInfo.url)[this.isActiveIndex]
        // })
        downLoadFiles(urlArr, fileName);
      }
    },

    // 收藏
    collectVideo(i) {
      // 已经收藏,取消收藏
      console.log(this.Iscollection);
      if (this.Iscollection) {
        let collectId;
        let params = {
          userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
          learningType: 1,
        };
        apiCollectionList(params)
          .then((res) => {
            console.log(res.data);
            if (res.data.length) {
              for (let i = 0; i < res.data.length; i++) {
                if (this.isActiveIndex == res.data[i].collectCount) {
                  collectId = res.data[i].collectId;
                }
              }
              console.log(collectId);

              apiDelCollection(collectId)
                .then((res) => {
                  if (res.code === 0) {
                    uni.showToast({
                      title: "取消成功",
                      icon: "success",
                      mask: true,
                      duration: 1500,
                    });
                    this.Iscollection = this.videoInfo.url[
                      Number(this.isActiveIndex) - 1
                    ].isCollect = false;
                    this.getCollectionList();
                  } else {
                    uni.showToast({
                      title: "取消失败",
                      icon: "error",
                      mask: true,
                      duration: 1500,
                    });
                  }
                })
                .catch((err) => {
                  uni.showToast({
                    title: "取消失败",
                    icon: "error",
                    mask: true,
                    duration: 1500,
                  });
                });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        let data = {
          collectCount: this.isActiveIndex, //收藏的第几集
          djStudyId: this.videoInfo.djStudyId,
          userId: JSON.parse(uni.getStorageSync("loginUserInfo")).uid,
        };

        apiShouChang(data)
          .then((res) => {
            console.log(res);
            if (res.code === 0) {
              uni.showToast({
                title: "收藏成功",
                duration: 1500,
                icon: "success",
                mask: true,
              });
              this.Iscollection = this.videoInfo.url[
                Number(this.isActiveIndex) - 1
              ].isCollect = true;

              this.getCollectionList(this.videoInfo.djStudyId);
            } else {
              uni.showToast({
                title: "收藏失败",
                duration: 1500,
                icon: "error",
                mask: true,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            uni.showToast({
              title: "收藏失败",
              duration: 1500,
              icon: "error",
              mask: true,
            });
          });
      }
    },

    clickVideoItem(index) {
      if (index === this.isActiveIndex) return;
      this.isActiveIndex = index;
      this.videoSrc = this.videoInfo.url[index - 1].src;
      this.clickCollectId = this.videoInfo.url[index - 1].collectId;
      this.getCollectionList();
      this.Iscollection = this.videoInfo.url[index - 1].isCollect;
    },
  },
};
</script>

<style>
page {
  background: #f9f9f9;
  height: 100vh;
  overflow: hidden;
}

.container {
  height: 100vh;
  position: relative;
}

#myVideo {
  object-fit: cover;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  height: 486rpx;
}

.video_info {
  margin-top: 20rpx;
  padding: 0 24rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  font-weight: 500;
  color: #000000;
}

.video_info .title .choose {
  margin: 20rpx 0;
  font-size: 30prx;
  color: #3b95ff;
}

.choose_num {
  display: flex;
}

.choose_num .video_i {
  width: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #edeef0;
  border-radius: 8px;
  margin-right: 20rpx;
}

.choose_num .video_i text {
  font-size: 28rpx;
  font-weight: bold;
  color: #000000;
}

.active {
  background: #b6ccea !important;
}

.collect {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  height: 120rpx;
  background: #ffffff;
  border-top: 2rpx solid #e0e4ea;
}

.collect {
  display: flex;
  justify-content: space-between;
  padding: 24rpx;
  box-sizing: border-box;
}

.collect_left {
  display: flex;
  align-items: center;
}

.icon-shoucang,
.icon-xingxing1 {
  font-size: 30rpx;
  margin-right: 16rpx;
}

.icon-xingxing1:before {
  color: #f2cb51;
}
</style>
